<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="todo-list">
			<input 
				v-model="newTodoText"
				v-on:keyup.enter="addNewTodo"
				placeholder="add a todo"/>
			<ul>
				<li
					is="todo-item"
					v-for="(todo,index) in todos"
					v-bind:title="todo"
					v-on:remove="todos.splice(index,1)"
					>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		Vue.component('todo-item',{
			template:'\
			<li>\
				{{title}}\
				<button v-on:click="$emit(\'remove\')">X</button>\
			</li>\
			',
			props:['title']
		})
		
		new Vue({
			el:"#todo-list",
			data:{
				newTodoText:'',
				todos:[
					'test1',
					'test2',
					'test3'
				]
			},
			methods:{
				addNewTodo:function(){
					this.todos.push(this.newTodoText)
					this.newTodoText = ''
				}
			}
		})
	</script>
</html>
